import React, {Component} from 'react';
import {Text, StyleSheet, TextInput, View} from 'react-native';

export default class PropsAndState extends Component {
  static navigationOptions = {
    title: 'PropsAndState',
  };
  constructor() {
    super();
    this.state = {name: 'ccoke'}
  }
  render() {
    return (
      <View>
        <MyText name={this.state.name}/>
        <TextInput/>
      </View>
    );
  }
}

class MyText extends Component {
  constructor(props) {
    super(props);
    this.state = {showText: false}

    setInterval(() => {
      this.setState(myState => {
        return {showText: !myState.showText};
      });
    }, 1000);
  }

  render() {
    return (
      <View>
        <Text style={styles.text}>{this.state.showText ? 'Hello:' + this.props.name : ''}</Text>
      </View>
    );

  }
}

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: '#666666',
  }
});